<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>入库申请单登记</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    </style>
</head>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="../../css/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="../../js/bootstrap-table.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table-zh-CN.min.js"></script>
<script>

    $(function () {
        $.ajax({
            type:'post',
            url:'/SysUser/queryUser',
            success:function (result) {
                    $("#register").val(result.loginId);
                    $("#register_time").val(new Date().toLocaleString());
            }
        })
    })


    function addGather() {
            $("#cellTab").bootstrapTable({
                method: "get",
                contentType: "application/json;charset=utf-8",
                url: "/sgather/findDfileInDESIGN_CELL_TAG",
                striped: true,
                pageNumber: 1,
                pagination: true,
                sidePagination: 'server',
                pageSize: 5,
                pageList: [3, 5, 6, 10],
                queryParams: function (params) {
                    return {
                        // 计算页号(当前页)
                        pageNumber: (params.offset / params.limit) + 1,
                        // 计算页大小
                        pageSize: params.limit,
                    }
                },
                columns: [
                    {title: '产品编号', field: 'productId', align: 'center'},
                    {title: '产品名称', field: 'productName', align: 'center'},
                    {title: '用途类型', field: 'type', align: 'center',formatter:function (value,row,index) {
                            if(value=='y001-1'){
                                return '商品';
                            }else if(value=='y001-2'){
                                return  '物料';
                            }else{
                                return '未知';
                            }
                        }},
                    {title: '单位',field: 'amountUnit',align: 'center'},
                    {title: '成本单价',field: 'realCostPrice',align: 'center'},
                    {title: '添加',field: 'id',align: 'center',
                        formatter: function (value, row, index) {
                            var btn1="<button  class='btn btn-primary btn-sm' onclick='addDile("+JSON.stringify(row)+")'>添加</button>";
                            return btn1;
                        }
                    },
                ]
            })
    }
    var max=0;
    function calculate(data,d) {
            var countList=$(".count");
            var unitList= $(".unit");
            var totalList=$(".total");
            var count=0;
            var sum=0;

            $.ajax({
                type:'post',
                url:'/sgather/queryCellByProductId',
                data:"productid="+data,
                success:function (result) {
                    console.log(result.maxCapacityAmount);
                        max=result.maxCapacityAmount;
                    if($(d).val()>max){
                        alert("超出最大存储量，当前最大存储量："+max);
                        $(d).val(max);

                    }
                    if($(d).val()<0){
                        alert("数量有误");
                        $(d).val("0");
                    }
                    $.each(countList,function (index,value) {

                        let to=countList[index].value*unitList[index].innerText;

                        totalList[index].innerText=to;
                        count+=parseInt(countList[index].value);
                        sum+=to;
                    })
                    $("#amount_sum").val(count);
                    $("#cost_price_sum").val(sum);
                }
            })


    }

    function addDile(data) {
        var filg=true;

        $(".id").each(function () {
            console.log($(this).text())
                if($(this).text()==data.productId){
                    filg=false;
                    alert("已添加此产品")
                }
        })

        if(filg){


        var productDescribe='';
        if(data.productDescribe!=null){
            productDescribe=data.productDescribe;
        }
            $("#tbody").append("<tr>" +
                "<td class='name'>"+data.productName+"</td>" +
                "<td class='id'>"+data.productId+"</td>" +
                "<td class='productDescribe'>"+productDescribe+"</td>" +
                "<td><input value='1' onblur='calculate("+data.productId+",this)' class='form-control-plaintext count' style=\"width: 80px;\"></td>" +
                "<td class='dw'>"+data.amountUnit+"</td>" +
                "<td class='unit'>"+data.realCostPrice+"</td>" +
                "<td><span id='total' class='total'></span></td>" +
                "<td><button class='btn btn-danger' onclick='romovefile(this)'>删除</button></td>" +
                "</tr>");

        calculate();
        }
    }

    function commit() {
            var list=[];
        var countList=$(".count");
        var unitList= $(".unit");
        var totalList=$(".total");
        var nameList=$(".name");
        var idList=$(".id");
        var productDescribeList=$(".productDescribe");
        var dwList=$(".dw");
        $.each(countList,function (index,value) {
                var obj={
                    productId:idList[index].innerText,
                    productName:nameList[index].innerText,
                    productDescribe:productDescribeList[index].innerText,
                    amount:countList[index].value,
                    amountUnit:dwList[index].innerText,
                    costPrice:unitList[index].innerText,
                    subtotal:totalList[index].innerText,
                }
                list.unshift(obj);
        })
        console.log(JSON.stringify(list));
        if(list.length>0 && $("#storer").val()!=""){
            $.ajax({
                type:'post',
                url:'/sgather/addGatherApplyFor',
                contentType: 'application/json;charset=utf-8',
                data:JSON.stringify({
                    sgather:{
                        storer:$("#storer").val(),
                        reason:$("#reason").val(),
                        amountSum:$("#amount_sum").val(),
                        costPriceSum:$("#cost_price_sum").val(),
                        remark:$("#remark").val(),
                        register:$("#register").val(),
                        registerTime:$("#register_time").val(),
                        reasonexact:$("#reasonexact").val(),
                    },
                    list:list,
                }),
                success:function (result) {
                    if(result=1){
                        alert('提交成功');
                        window.location.reload();
                    }
                }
            })
        }else{
            alert("产品未添加或入库人为空");
        }

    }
    function romovefile(data) {
        data.parentNode.parentNode.remove();
    }
</script>

<body>


<div style="margin-left: 10%">
    <button type="button" onclick="addGather();" class="btn btn-info"  data-toggle='modal' data-target='#myModal2'>添加产品</button>
    <button class="btn btn-success" onclick="commit()">提交</button>
</div>

<div class="shadow" style="width: 80%;height: 30%;margin-top: 5px;margin-left: 10%">
    <div style="width: 90%; margin-left: 50px">



        <div class="text-center"><h2>入库申请单</h2></div>
        <div style="margin-top: 50px">
            <div class="form-inline row" style="margin-left: 5%">

                <span class="" >入库人：</span>
                <input type="text"  id="storer" class="form-control col-3">
                <div class="col-2"></div>
                <span class="" >入库理由：</span>
                <select id="reason" class="form-control col-3">
                    <option value="r001-1">生产入库</option>
                    <option value="r001-2">库存初始</option>
                    <option value="r001-3">赠送</option>
                    <option value="r001-4">内部归还</option>
                    <option value="r001-5">其他归还</option>

                </select>
            </div>


        </div>

        <table class="table tab-content table-hover" style="margin-top: 20px;border: 1px black solid">
            <thead class="table-info">
            <tr class="tab-content">
                <td>产品名称</td>
                <td>产品编号</td>
                <td>描述</td>
                <td>数量</td>
                <td>单位</td>
                <td>成本单价（元）</td>
                <td>小计（元）</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody" class="tab-content">

            </tbody>
        </table>
        <div class="form-inline row" style="margin-top: 20px;margin-left: 5% ">

            <span class=""  >总数量：</span>
            <input readonly type="text" id="amount_sum" class="form-control col-3">
            <div class="col-2"></div>
            <span class="" >&nbsp;&nbsp;&nbsp;总金额：</span>
            <input readonly type="text" id="cost_price_sum"  class="form-control col-3">
        </div>
        <div class="form-inline row" style="margin-top: 20px ;margin-left: 5%">

            <span class="" >登记人：</span>
            <input readonly type="text" id="register" class="form-control col-3">
            <div class="col-2"></div>
            <span class="" >登记时间：</span>
            <input readonly id="register_time" type="text" class="form-control col-3">
        </div>
        <div class="row" style="margin: 20px 20px ">
            <span class=" text-center col-2" >入库详细：</span>
            <textarea id="reasonexact" class="col-9 form-control" style="height: 80px"></textarea>
        </div>
        <div class="row" style="margin: 20px 20px ">
            <span class=" text-center col-2" >备注：</span>
            <textarea id="remark" class="col-9 form-control" style="height: 80px"></textarea>
        </div>

    </div>
</div>



<div class="modal fade" id="myModal2">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title" style="margin-left: 43%;">添加产品</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <table id="cellTab">

                </table>



            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
</body>
</html>